(function () {

    chartUtil = {};
    /**
     * 分片作画
     * @param chartElemContainer 作画容器
     * @param title 标题
     * @param legend 数据内容标题，一维数组
     * @param xData x轴数据内容，一维数组
     * @param yData y轴数据内容，二维数组，其一维数据对应legend，二维数据则对应 xData的数据
     * @param xDataSectionSize 把xData分片时，每一片所拥有的数量 ，默认等于999999 ，不切片
     */
    chartUtil.drawSection = function drawSection(chartElemContainer, title, legend, xData, yData, xDataSectionSize) {
        if (xDataSectionSize && xDataSectionSize < xData.length) {
            var xDataSectionN = (xData.length / xDataSectionSize) <= 0 ? 1
                : parseInt(xData.length / xDataSectionSize) + (xData.length % xDataSectionSize == 0 ? 0 : 1);

            var inXData = new Array();
            var inYData = new Array();

            //xData切片
            for (var i = 0; i < xDataSectionN; ++i) {
                var sectionI = new Array();
                for (var j = 0; j < xDataSectionSize; ++j) {
                    if (i * xDataSectionSize + j >= xData.length) {
                        break;
                    }
                    sectionI.push(xData[i * xDataSectionSize + j])
                }
                inXData.push(sectionI);
            }

            //yData切片
            var yDataSection = new Array();
            for (var k = 0; k < legend.length; ++k) {
                var sectionK = new Array();
                for (var i = 0; i < xDataSectionN; ++i) {
                    var sectionI = new Array();
                    for (var j = 0; j < xDataSectionSize; ++j) {
                        if (i * xDataSectionSize + j >= yData[k].length) {
                            break;
                        }
                        sectionI.push(yData[k][i * xDataSectionSize + j])
                    }
                    sectionK.push(sectionI);
                }
                yDataSection.push(sectionK);
            }

            for (var i = 0; i < xDataSectionN; ++i) {//分片数
                var sectionI = new Array();
                for (var j = 0; j < legend.length; ++j) {//每一片包含的legend
                    sectionI.push(yDataSection[j][i]);
                }
                inYData.push(sectionI);
            }
            //清空之前所有的子元素
            var childs = chartElemContainer.childNodes;
            for (var i = childs.length - 1; i >= 0; i--) {
                chartElemContainer.removeChild(childs[i]);

            }

            //每一片画图
            for (var i = 0; i < inXData.length; ++i) {
                var sectionDiv = document.createElement("div");
                sectionDiv.setAttribute("style", "width:100%;height:500px;");
                chartElemContainer.appendChild(sectionDiv);
                chartUtil.draw(sectionDiv, title, legend, inXData[i], inYData[i]);
            }
        } else {
            chartUtil.draw(chartElemContainer, title, legend, xData, yData);
        }
    }

    /**
     * 作画
     * @param elem
     * @param title
     * @param legend
     * @param xData
     * @param yData
     */
    chartUtil.draw = function draw(elem, title, legend, xData, yData) {
        var chartZhe = echarts.init(elem);
        var seriesZ = [];
        for (var m = 0; m < legend.length; m++) {
            seriesZ.push({
                name: legend[m],
                type: 'line', //线性
                smooth: true,
                data: yData[m],
                itemStyle: {
                    normal: {
                        label: {
                            show: true, //开启显示
                            position: 'top', //在上方显示
                            textStyle: { //数值样式
                                color: 'black',
                                fontSize: 16
                            }
                        }
                    }
                }
            });
        }

        var optionchartZhe = {
            title: {
                text: title
            },
            tooltip: {
                trigger: 'axis',
                formatter: function (params, ticket, callback) {
                    var htmlStr = '';
                    var valMap = {};
                    for (var i = 0; i < params.length; i++) {
                        var param = params[i];
                        var xName = param.name;//x轴的名称
                        var seriesName = param.seriesName;//图例名称
                        var value = param.value;//y轴值
                        var color = param.color;//图例颜色
                        //过滤无效值
                        if (value == '-') {
                            continue;
                        }
                        //过滤重叠值
                        if (valMap[seriesName] == value) {
                            continue;
                        }
                        if (i === 0) {
                            htmlStr += xName + '<br/>';//x轴的名称
                        }
                        htmlStr += '<div>';
                        //为了保证和原来的效果一样，这里自己实现了一个点的效果
                        htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>';
                        //圆点后面显示的文本
                        htmlStr += seriesName + '：' + value;
                        htmlStr += '</div>';
                        valMap[seriesName] = value;
                    }
                    return htmlStr;
                }
            },
            legend: { //顶部显示 与series中的数据类型的name一致
                data: legend
            },
            toolbox: {
                show: true,
                feature: {
                    magicType: {show: true, type: ['line', 'bar']},
                    saveAsImage: {show: true}
                }
            },
            xAxis: {
                data: xData
            },
            yAxis: {
                type: 'value'
            },
            series: seriesZ
        };
        chartZhe.setOption(optionchartZhe, true);
    }
})();